<template>
  <div class="list">
    <h1 class="title">{{data.typeName}}</h1>
    <div class="content">
      <div
        class="item"
        v-for="item of data.processDefinitions"
        :key="item.id"
        @click="$emit('item-click', item)"
      >
        <svg-icon :iconClass="item.flowInfo.iconName || 'edit'" />
        <div class="label">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      required: true,
      default: () => {}
    }
  }
}
</script>

<style lang="stylus" scoped>
.list
  margin-top 24px
  border 1px solid #e8e8e8
  .title
    height 56px
    line-height 56px
    color rgba(0, 0, 0, 0.85)
    background rgb(234, 234, 234)
    font-size 16px
    font-weight 500
    border-bottom 1px solid #e8e8e8
    border-radius 2px 2px 0 0
    padding 0 32px
    margin-bottom -1px
    zoom 1
  .content
    display flex
    flex-wrap wrap
    margin -1px 0 0 -1px
    zoom 1
    .item
      width 20%
      display flex
      align-items center
      padding 24px
      box-sizing border-box
      box-shadow 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8, inset 1px 0 0 0 #e8e8e8, inset 0 1px 0 0 #e8e8e8
      transition all 0.3s
      color rgba(0, 0, 0, 0.65)
      cursor pointer
      &:hover
        position relative
        z-index 1
        box-shadow 0 2px 8px rgba(0, 0, 0, 0.15)
      .svg-icon
        font-size 30px
      .label
        margin-left 20px
        font-size 14px
</style>
